

function createLeftTopChart(data){
	var xAxisData=getList(data,'name');
	var seriesData=getList(data,'value');

	var leftTopDom=document.getElementById("left-top-component");
	var leftTopChart=echarts.init(leftTopDom);
	var leftTopOption={
		backgroundColor: backgroundColor,
	    textStyle:{
	        color:'white'
	    },
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis : [
	        {
	            type : 'category',
	            data : xAxisData,
	            axisTick: {
	                alignWithLabel: true
	            },
	            axisLabel: {  
	               interval:0,  
	               rotate:40 
	            }  
	        }
	    ],
	    yAxis : [
	        
	        {
	            name:'销量(元)',
	            type : 'value',
	            splitLine:{
	                lineStyle:{
	                    color:'#534f69'
	                }
	            }
	        }
	    ],
	    series : [
	        {
	            name:'交易额',
	            type:'bar',
	            barWidth: '60%',
	            itemStyle:{
	                color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                    offset: 0,
	                    color: '#F57E3D'
	                }, {
	                    offset: 1,
	                    color: '#F5D33D'
	                }]),
	
	            },
	            data:seriesData
	        }
	    ]
	}
	leftTopChart.setOption(leftTopOption, true);
}


function createleftBottomChart(data){
	var xAxisData=getList(data,'name');
	var seriesData=getList(data,'value');
	
	var leftBottomDom=document.getElementById("left-bottom-component");
	var leftBottomChart=echarts.init(leftBottomDom);
	var leftBottomOption={
		backgroundColor: backgroundColor,
	    textStyle:{
	        color:'white'
	    },
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis : [
	        {
	            type : 'category',
	            data : xAxisData,
	            axisTick: {
	                alignWithLabel: true
	            },
	            axisLabel: {  
	               interval:0,  
	               rotate:40 
	            }  
	        }
	    ],
	    yAxis : [
	        
	        {
	            name:'销量(元)',
	            type : 'value',
	            splitLine:{
	                lineStyle:{
	                    color:'#534f69'
	                }
	            }
	        }
	    ],
	    series : [
	        {
	            name:'交易额',
	            type:'bar',
	            barWidth: '60%',
	            itemStyle:{
	                color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                    offset: 0,
	                    color: '#F57E3D'
	                }, {
	                    offset: 1,
	                    color: '#F5D33D'
	                }]),
	
	            },
	            data:seriesData
	        }
	    ]
	}
	leftBottomChart.setOption(leftBottomOption, true);
}


function createRightTopChart(data){
	var xAxisData=getList(data,'name');
	var seriesData=getList(data,'value');
	
	var rightTopDom=document.getElementById("right-top-component");
	var rightTopChart=echarts.init(rightTopDom);
	
	var rightTopOption={
	    backgroundColor: backgroundColor,
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'shadow'
	        }
	    },
        grid: {
            left: '5%',
            right: '5%',
			bottom:'8%',
            containLabel: true
        },
	    xAxis: {
	        data: xAxisData,
	        axisLine: {
	            lineStyle: {
	                color: '#ccc'
	            }
	        }
	    },
	    yAxis: {
	        name:"金额(元)",
	
	        splitLine: {show: false},
	        axisLine: {
	            lineStyle: {
	                color: '#ccc'
	            }
	        }
	    },
	    series: [{
	        name: 'line',
	        type: 'line',
	        smooth: true,
	        showAllSymbol: true,
	        symbol: 'emptyCircle',
	        symbolSize: 15,
	        data: seriesData
	    }, {
	        name: 'line',
	        type: 'bar',
	        barGap: '-100%',
	        barWidth: 10,
	        itemStyle: {
	            normal: {
	                color: new echarts.graphic.LinearGradient(
	                    0, 0, 0, 1,
	                    [
	                        {offset: 0, color: 'rgba(20,200,212,0.5)'},
	                        {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
	                        {offset: 1, color: 'rgba(20,200,212,0)'}
	                    ]
	                )
	            }
	        },
	        z: -12,
	        data: seriesData
	    }, {
	        name: 'dotted',
	        type: 'pictorialBar',
	        symbol: 'rect',
	        itemStyle: {
	            normal: {
	                color: '#0f375f'
	            }
	        },
	        symbolRepeat: true,
	        symbolSize: [12, 4],
	        symbolMargin: 1,
	        z: -10,
	        data: seriesData
	    }]
	}
	rightTopChart.setOption(rightTopOption, true);
}







function createRightBottomChart(data){
	var xAxisData=getList(data,'name');
	var colorList=[
		{name:"R端",color:'#f5943d'},
		
		{name:"G端",color:'#3fff00'},
		{name:"B端",color:'#2593a2'},
		{name:"F端",color:'#f5533d'}
	]
	for(var i=0;i<data.length;i++){
		for(var j=0;j<colorList.length;j++){
			if(colorList[j].name==data[i].name){
				var tempObj={color:colorList[j].color}
				data[i].itemStyle=tempObj;
				break;
			}
		}
	}

	
	var rightBottomDom=document.getElementById("right-bottom-component");
	var rightBottomChart=echarts.init(rightBottomDom);
	var rightBottomOption={
		backgroundColor: backgroundColor,
		tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient: 'horizontal',
	        left: 'center',
	        bottom:'20px',
	        textStyle:{
	        	color:'white'
	        },
	        data: xAxisData,
	        itemWidth:20,
	        formatter:function(param){
            	var textMap={"F端":"生产商","B端":"渠道商","R端":"零售商","G端":"政采用户"};
            	
            	return textMap[param];
            }
	    },
	    series : [
	        {
	            name: '访问来源',
	            type: 'pie',
	            radius : '45%',
	            center: ['50%', '45%'],
	            data:data,
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            },
	            label:{            //饼图图形上的文本标签
                    normal:{
                        show:true,
                        //position:'inner', //标签的位置
                        textStyle : {
                            fontWeight : 300 ,
                            fontSize : 14    //文字的字体大小
                        },
                       
						formatter:'{b}\n{d}%\n{c}'
                        
                    }
                }
                /*label:{            //饼图图形上的文本标签
                    normal:{
                        show:true,
                        position:'inner', //标签的位置
                        textStyle : {
                            fontWeight : 300 ,
                            fontSize : 16    //文字的字体大小
                        },
                        formatter:'{d}%'

                        
                    }
                }*/
	        }
	    ]
	}
	rightBottomChart.setOption(rightBottomOption, true);
	
}


function createChinaMapChart(data){
	var chinaMapDom=document.getElementById("china-map");
	chinaMapChart=echarts.init(chinaMapDom);
	
	//获取最大值
	var firstValue=data[0].value;
	var maxValue=parseInt(firstValue);
	for(var i=1;i<data.length;i++){
		var dataItemValue=parseInt(data[i].value);
		if(maxValue<dataItemValue){
			maxValue=dataItemValue;
		}
	}
	//获取地图的visualMap的最大取值
	var visualMapMax=parseInt(maxValue/100+1)*100;
	
	chinaMapOption = {
	    tooltip: {},
	    visualMap: {
	        min: 0,
	        max: visualMapMax,
	        left: 'left',
	        top: 'bottom',
	        text: ['High','Low'],
	        seriesIndex: [1],
	        inRange: {
	            color: ['#AE76FB', '#6129C0']
	        },
	        itemHeight:'120%',
	        calculable : true,
	        textStyle:{
		        color:'white'
		    }
	    },
	    geo: {
			width:'85%',
			height:'95%',
	        map: 'china',
	        roam: false,
	        label: {
	            normal: {
	                show: true,
	                textStyle: {
	                    color: 'rgba(0,0,0,0.4)'
	                }
	            }
	        },
	        itemStyle: {
	            normal:{
	                borderColor: 'rgba(0, 0, 0, 0.2)'
	            },
	            emphasis:{
	                areaColor: null,
	                shadowOffsetX: 0,
	                shadowOffsetY: 0,
	                shadowBlur: 20,
	                borderWidth: 0,
	                shadowColor: 'rgba(0, 0, 0, 0.5)'
	            },

	        }
	    },
	    series : [
	       {
	           type: 'scatter',
	           coordinateSystem: 'geo',
	
	        },
	        {
	            name: '交易额',
	            type: 'map',
	            geoIndex: 0,
	            // tooltip: {show: false},
	            data:data

	        }
	    ]
	};
	chinaMapChart.setOption(chinaMapOption, true);
}




